<template>
  <el-card>
    <div style="font-weight: bold; font-size: 25px">质检详情</div>
  </el-card>

  <el-card class="quality-detail-card">
  <!-- 顶部信息栏 -->
  <div class="top-bar flex justify-between items-center">
    <div>
      <h2 class="title-text">{{ qualityDetail.quaworkname }}</h2>
      <p class="meta-text">
        创建人: {{ qualityDetail.qualityUsername }}; 创建时间: {{ 
        formatTime(qualityDetail.createtime) }}; 最后修改人: {{ qualityDetail.qualityUsername }}; 修改时间: {{ 
        formatTime(qualityDetail.updatetime) }}
      </p>
    </div>
    <div 
      class="status-stamp" 
      :class="qualityDetail.status === 0 ? 'status-incomplete' : 'status-complete'"
    >
      {{ qualityDetail.status === 0 ? "未完成" : "已完成" }}
    </div>
  </div>
</el-card>

  <el-card class="quality-detail-card">
    <el-tabs v-model="activeTab" class="mt-4">
      <el-tab-pane label="工单信息" name="workorder" @click="router.push('/qualitywork')">   
    <div class="section-title">◆ 基础信息</div>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">质检工单编号：</span>
            <span>{{ qualityDetail.quaworkcode }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">质检工单主题：</span>
            <span>{{ qualityDetail.quaworkname }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">来源工单：</span>
            <span>{{ qualityDetail.workCode }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">生产产品：</span>
            <span>{{ qualityDetail.goodsname }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">质检负责人：</span>
            <span>{{ qualityDetail.qualityUsername }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">工序数量：</span>
            <span>{{ qualityDetail.processcount }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">报工次数：</span>
            <span>{{ qualityDetail.reportingcount }}</span>
          </div>
          <div class="info-item" style="grid-column: 1 / 3">
            <span class="info-label">备注：</span>
            <span>{{ qualityDetail.meeage }}</span>
          </div>
        </div>  
    </el-tab-pane>
      <el-tab-pane label="质检报工" name="workop" @click="router.push('/qualityorder')">
         <div class="section-title">◆ 基础信息</div>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">质检工单编号：</span>
            <span>{{ qualityDetail.quaworkcode }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">质检工单主题：</span>
            <span>{{ qualityDetail.quaworkname }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">来源工单：</span>
            <span>{{ qualityDetail.workCode }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">生产产品：</span>
            <span>{{ qualityDetail.goodsname }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">质检负责人：</span>
            <span>{{ qualityDetail.qualityUsername }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">工序数量：</span>
            <span>{{ qualityDetail.processcount }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">报工次数：</span>
            <span>{{ qualityDetail.reportingcount }}</span>
          </div>
          <div class="info-item" style="grid-column: 1 / 3">
            <span class="info-label">备注：</span>
            <span>{{ qualityDetail.meeage }}</span>
          </div>
        </div> 
      </el-tab-pane>
      <el-tab-pane label="质检记录" name="record"></el-tab-pane>
      <el-tab-pane label="操作记录" name="operation"></el-tab-pane>
    </el-tabs>
    <div class="footer-button">
      <el-button @click="close">关闭</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElButton, ElTabs, ElTabPane } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import myaxios from "@/Http/http";

const route = useRoute();
const router = useRouter();
const activeTab = ref("workorder");

// 质检详情数据
const qualityDetail = ref({
  quaworkcode: "",
  quaworkname: "",
  workCode: "",
  goodsname: "",
  department: "",
  qualityUsername: "",
  processcount: 0,
  reportingcount: 0,
  meeage: "",
  status: 0,
  createUsername: "",
  createtime: "",
  updateUsername: "",
  updatetime: "",
});

// 获取质检详情
const getQualityDetail = () => {
  const id = localStorage.getItem("qualityid");
  if (!id) {
    console.error("缺少质检工单ID");
    return;
  }

  myaxios
    .get("/api/Quality/FindQuality?Id="+id)
    .then((res) => {
      if (res.data.code === 200) {
        qualityDetail.value = res.data.result;
      }
    })
    .catch((err) => {
      console.error("获取质检详情失败：", err);
    });
};

const close = () => {
    router.push("/qualitylist");
    localStorage.removeItem("qualityid");
};

// 组件内局部时间格式化函数
const formatTime = (timeStr:any) => {
  if (!timeStr) return '暂无'; // 空值兜底
  // 处理带 T、带毫秒的格式（如 "2025-11-18T19:51:12.123"）
  return timeStr.split('.')[0].replace('T', ' ');
};

onMounted(() => {
  getQualityDetail();
});
</script>

<style scoped>
.quality-detail-card {
  width: 80%;
  margin: 15px;
}

.page-title {
  font-weight: bold;
  font-size: 18px;
}

.section-title {
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-label {
  font-weight: bold;
  margin-right: 5px;
}

.attachment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 10px;
}

.attachment-item {
  border: 1px solid #e5e7eb;
  padding: 10px;
  border-radius: 4px;
}

.attachment-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.attachment-info {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.attachment-buttons {
  margin-top: 10px;
}

.footer-button {
  text-align: center;
  margin-top: 20px;
}

.status-stamp {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid;
  transition: all 0.3s ease;
}

.status-incomplete {
  background-color: #fef6e6;
  color: #e6a23c;
  border-color: #fdf0d7;
}

.status-complete {
  background-color: green;
  color:green;
  border-color:green;
}
.status-stamp {
  position: relative; /* 为伪元素定位做准备 */
}
.status-stamp::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: -2px;
  bottom: -2px;
  border: 2px dashed #ddd;
  border-radius: 6px;
  transform: rotate(1deg);
  z-index: -1;
  opacity: 0.8;
}

.top-bar {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.meta-text {
  font-size: 12px;
  color: #666;
  margin: 5px 0 0 0;
}

.status-stamp {
  font-size: 14px;
  color: #999;
  border: 2px dashed #999;
  border-radius: 4px;
  padding: 5px 10px;
  transform: rotate(5deg);
  display: inline-block;
}
</style>
